<template>
  <div class="nanning-screen-title-tab">
    <div v-for="(item, index) in tabList" :key="index" :class="['tab-item', currentTab === item.value ? 'active' : '']" @click="onChangeTab(item.value)">
      <div class="tip">{{ item.label }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
@Component({
  name: 'nanning-screen-title-tab'
})
export default class NanningScreenTitleTab extends Vue {
  @Prop({ default: 1 }) private currentTab!: number
  @Prop({
    default: () => [
      { value: 1, label: '省内' },
      { value: 2, label: '省外' }
    ]
  })
  private tabList!: any[]

  @Emit()
  private onChangeTab(value: any) {
    return value
  }
}
</script>

<style lang="scss" scoped>
.nanning-screen-title-tab {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .tab-item {
    width: 50px;
    height: 22px;
    line-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: url('../../assets/images/home-tab-bac.png') no-repeat center;
    & + .tab-item {
      margin-left: 7px;
    }
    &.active {
      background: url('../../assets/images/home-tab-active.png') no-repeat center;
      .tip {
        color: #fff;
      }
    }
    .tip {
      font-size: 14px;
      font-family: 'PingFang Regular';
      font-weight: 400;
      color: #fff;
    }
  }
}
</style>
